<template>
  <div class="wty-header-content">
    <div class="wty-header-content-wrapper">
      <div class="wty-header-content-search">
        <div class="wty-search-input-wrapper">
          <input class="text" type="text" placeholder="搜索商家或地点" />
          <!-- placeholder:预览内容 -->
        </div>
        <div class="wty-search-button-wrapper">
          <span class="el-icon-search"></span>
        </div>
      </div>
      <div class="wty-header-content-logo">
        <router-link to="/foodie">
          <img :src="logoSrc" alt="" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logoSrc: "https://s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png"
    };
  }
};
</script>

<style lang="scss" scoped>
.wty-header-content {
  .wty-header-content-wrapper {
    width: 1190px;
    height: 157px;
    margin: auto;
    position: relative;
    .wty-header-content-search {
      width: 550px;
      height: 40px;
      padding-top: 28px;
      margin: 0 auto; // 上下为零，左右auto
      display: flex;
      .wty-search-input-wrapper {
        flex: 0 0 470px;
        width: 470px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .text {
          width: 100%;
          height: 100%;
          outline: none;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
          border: 1px solid #eeeeee; // 边框
          border-right: none;
          box-sizing: border-box; // 让按钮和搜索框耦合在一起
          text-indent: 14px; // 首行缩进
          font-size: 14px;
        }
      }
      .wty-search-button-wrapper {
        flex: 1;
        width: 80px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: orange;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        cursor: pointer;
        .el-icon-search {
          font-size: 20px;
          font-weight: bolder;
        }
      }
    }
    .wty-header-content-logo {
      width: 126px;
      height: 157px;
      position: absolute;
      left: 0;
      top: 0;
      padding-top: 28px;
      img {
        width: 126px;
        height: 40px;
        cursor: pointer;
      }
    }
  }
}
</style>
